<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <title>推荐系统后台监控</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <!--热度榜-->
        <div class="col-sm-6" style="margin-top: 50px;" >
            <p1 style="font-size: 50px; margin-left: 250px; margin-bottom: 20px;color: crimson">热度榜</p1>
                <!--<div class="row" style=" border: 3px solid #ff877c">-->
            <!--<div class="container" style=" border: 3px solid #ff877c">-->
                <div class="row" th:each="pro : ${topProduct}" style=" border: 3px solid #ffe9bf">
                    <div class="col-sm-3">
                        <img style="width: 100px;height: 100px;" th:src="${pro.picUrl}"/>
                    </div>
                    <div class="col-sm-3">
                        <div class="row">
                            <text><strong>id:</strong></text>
                            <text th:text="${pro.id}"></text>
                            <text><strong>brand:</strong></text>
                            <text th:text="${pro.brandName}"></text>
                        </div>
                        <div class="row">
                            <text th:text="${pro.itemName}"></text>
                        </div>
                    </div>
                </div>

            <!--</div>-->
        </div>
        <!--小时内实时日志量-->
        <div class="col-sm-4">
            <div id="meter" style="width: 500px;height: 400px;"></div>
        </div>
    </div>


    </div>

</div>
<script th:inline="javascript">
    $(document).ready(function () {
        var myChart = echarts.init(document.getElementById('meter'));
        $.ajax({
                type: "get",
                url: "/meter",
                dataType: "json",        //返回数据形式为json
                success: function (result) {
                    //请求成功时执行该函数内容，result即为服务器返回的json对]象
                    if (result) {
                        var value = result["data"];
                        myChart.setOption({
                            tooltip: {
                                formatter: "{a} <br/>{b} : {c}"
                            },
                            toolbox: {
                                feature: {
                                    restore: {},
                                    saveAsImage: {}
                                }
                            },
                            series: [
                                {
                                    name: '业务指标',
                                    type: 'gauge',
                                    detail: {formatter: '{value}'},
                                    data: [{value: value, name: '1小时内日志量接入量'}]
                                }
                            ]
                        });
                    }
                },
                error: function (errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    myChart.hideLoading();
                }
            }
        )
    });
</script>
</body>

</html>